<template>
  <div id="RoomSetting">
    <div class="bbbug_main_right">
      <div class="bbbug_main_right_room">
        <div class="bbbug_main_right_room_title">我的个人中心
          <div class="bbbug_main_right_song_right" @click="updateMyInfo">保存</div>
        </div>
        <el-form label-width="60px" class="bbbug_my_setting__form" v-loading="loading">
          <div style="text-align: center;margin-bottom: 20px;">
            <el-upload :action="uploadHeadUrl" :show-file-list="false"
                       :on-success="handleProfileHeadUploadSuccess" :before-upload="doUploadBefore"
                       :data="baseData">
              <img :src="getStaticUrl(userInfo.user_head)" class="xiaomi"
                   :onerror="getStaticUrl('new/images/nohead.jpg')"
                   style="border-radius: 10px;width:80px;height:80px;" />
            </el-upload>
            <div>ID:
              <font color=orangered style="margin-left:5px;font-weight: bolder;">
                {{userInfo.user_id}}</font>
            </div>
          </div>
          <el-form-item label="昵称">
            <el-input size="medium" autocomplete="off" placeholder="请输入你的昵称" v-model="userInfo.user_name">
            </el-input>
          </el-form-item>
          <el-form-item label="签名">
            <el-input size="medium" autocomplete="off" placeholder="请输入你的签名" v-model="userInfo.user_remark">
            </el-input>
          </el-form-item>
          <el-form-item label="摸摸">
            <el-input size="medium" autocomplete="off" placeholder="" v-model="userInfo.user_touchtip">
            </el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select size="medium" v-model="userInfo.user_sex" placeholder="请选择你的性别" class="allLine"
                       style="margin-left:0px;">
              <el-option v-for="item in sexList" :key="item.valule" :label="item.title" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码">
            <el-input size="medium" autocomplete="off" placeholder="你的密码,不修改请留空"
                      v-model="userInfo.user_password"></el-input>
          </el-form-item>
        </el-form>
        <div class="bbbug_my_setting__clear">
          <button class="bbbug_my_setting__clear_button" @click="logout">退出登录</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export
default {
  data() {
    return {
      loading: false,
      userInfo: {},
      roomInfo: {},
      uploadHeadUrl: "",
      baseData: false,
      sexList: [{
        value: 0,
        title: '女生',
      }, {
        value: 1,
        title: '男生',
      }],
    }
  },
  created() {
    this.userInfo = Object.assign({}, this.global.userInfo);
    this.roomInfo = Object.assign({}, this.global.roomInfo);

    this.userInfo.user_name = decodeURIComponent(this.userInfo.user_name);

    this.uploadHeadUrl = this.global.apiUrl + "/api/attach/uploadHead";
    this.baseData = this.global.baseData;
    if (this.userInfo.user_id < 0) {
      this.$parent.hideAll();
      this.$parent.showLoginForm();
    }
  },
  methods: {
    /**
     * @description: 上传头像前校验
     * @param {file} 选择的文件
     * @return {bool} 是否校验通过
     */
    doUploadBefore(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('发送图片只能是 JPG/PNG/GIF 格式!');
      }
      if (!isLt2M) {
        this.$message.error('发送图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    /**
     * @description: 头像上传成功事件
     * @param {obj} 服务器返回数据
     * @return {file} 上传的本地文件
     */
    handleProfileHeadUploadSuccess(res, file) {
      var that = this;
      if (res.code == 200) {
        that.userInfo.user_head = that.getStaticUrl(res.data.attach_thumb);
      } else {
        that.$message.error(res.msg);
      }
    },
    /**
     * @description: 更新我的资料
     * @param {null}
     * @return {null}
     */
    updateMyInfo() {
      let that = this;
      that.loading = true;
      that.request({
        url: "user/updateMyInfo",
        data: that.userInfo,
        success(res) {
          that.$message.success(res.msg);
          that.request({
            url: "user/userinfo/getMyInfo",
            success(res) {
              that.loading = false;
              that.$parent.userInfo = res.data;
              that.global.userInfo = res.data;
              that.$parent.hideAll();
            },
            error() {
              that.loading = false;
            }
          });
        },
        error() {
          that.loading = false;
        }
      });
    },
    /**
     * @description: 退出登录
     * @param {null}
     * @return {null}
     */
    logout() {
      var that = this;
      that.$confirm('是否确认退出当前登录的账号?', '退出登录', {
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        localStorage.removeItem('access_token');
        that.global.userInfo = that.global.guestUserInfo;
        that.global.baseData.access_token = that.global.guestUserInfo.access_token;
        that.$parent.hideAll();
        that.$parent.getUserInfo();
      }).catch(function () { });
    },
  },
}
</script>
<style>
.bbbug_my_setting__form {
  background-color: white;
  padding: 20px;
  padding-left: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  top: 55px;
  overflow: hidden;
  overflow-y: auto;
}

.el-select {
  display: block;
}

.bbbug_my_setting__clear {
  position: absolute;
  left: 0;
  right: 10px;
  bottom: 10px;
  text-align: right;
}

.bbbug_my_setting__clear_button {
  background-color: orangered;
  color: white;
  padding: 10px 30px;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
}

.bbbug_my_setting__clear_button:active {
  background-color: red;
}
</style>
